<template>
    <div class="home-header">
      <div class="header">
        <!-- <img src="http://f-s2.gitee.io/blogimagebed/avatar.gif" alt=""> -->
        <span>电商管理系统</span>
      </div>
      <!-- <el-button type="info" @click="logout">退出</el-button> -->
      <div class="info-box" @click.stop="showLogout=!showLogout">
        <div class="name">{{username}}</div>
        <div :class="`avatar-box ${showLogout ? 'avatar-top' : 'avatar-bottom'}`">
          <img src="http://f-s2.gitee.io/blogimagebed/avatar.gif" alt="">
        </div>
        <transition enter-active-class="enter" leave-active-class="leave">
          <div class="logout-box" @click.stop="logout" v-show="showLogout">
            <img src="@/assets/img/logout.png" alt="">
            <div>退出登录</div>
          </div>
        </transition>
      </div>
      
    </div>
</template>

<script>
  export default {
    name: 'HomeHeader',
    data() {
      return {
        showLogout: false
      }
    },
    computed: {
      username() {
        if(this.$getCookie('is_admin') == 1) return 'admin'
        return this.$getCookie('user_name')
      }
    },
    methods: {
      logout() {
        window.sessionStorage.removeItem('token');
        this.$router.push('/login');
      }
    },
    mounted() {
      document.addEventListener('click', () => {
        this.showLogout = false
      })
    }
  }
</script>

<style scoped>
  .home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:var(--themeColor);
    height: 100%;
  }
  .header {
    display: flex;
    align-items: center;
  }
  .header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px;
  }
  .header img:hover {
    transform: rotate(666turn);
    transition: all 59s 1s cubic-bezier(.34,0,.84,1);
  }
  .header span {
    font-size: 1.4rem;
    /* font-weight: bold; */
    color: #fff;
    text-shadow: 0 1px 3px #eee;
  }
  .info-box {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 100%;
    align-items: center;
    color: rgb(206, 206, 206);
    font-size: 1rem;
    user-select: none;
    background-color: var(--themeColor);
  }
  .avatar-box {
    position: relative;
    padding-right: 1rem;
    margin-left: .5rem;
  }
   .avatar-box img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: 0 0 5px 1px #eee;
    margin: 5px;
  }
  .avatar-box img:hover {
    transform: rotate(666turn);
    transition: all 59s .5s cubic-bezier(.34,0,.84,1);
  }
  .avatar-bottom::after {
    content: '';
    position: absolute;
    top: 1.8rem;
    right: 0;
    width: .8rem;
    height: .8rem;
    background-color: rgb(206, 206, 206);
    clip-path: polygon(0 35%, 50% 100%, 100% 35%);
  }
  .avatar-top::after {
    content: '';
    position: absolute;
    top: 1.8rem;
    right: 0;
    width: .8rem;
    height: .8rem;
    background-color: rgb(206, 206, 206);
    clip-path: polygon(50% 0%, 0 75%, 100% 75%);
  }
  .logout-box {
    position: absolute;
    width: 100%;
    height: 1.6rem;
    padding: .6rem .2rem;
    margin-top: -.2rem;
    z-index: -10;
    top: 100%;
    right: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 0 0 .8rem .8rem;
    background-color: var(--themeColor);
    /* transition: height .5s; */
    animation-fill-mode: backwards;
    overflow: hidden;
    max-width: 8rem;
    font-size: .95rem;
  }
  .logout-box img {
    width: 1.2rem;
    margin-right: .5rem;
  }
  .enter {
    animation: show .5s ease-in-out;
  }
  @keyframes show {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(-0%);
      opacity: 1;
    }
  }
  .leave {
    animation: hide .5s ease-in-out;
  }
  @keyframes hide {
    0% {
      transform: translateY(-0%);
      opacity: 1;
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
</style>